<!-- @format -->
<script setup>
	// 默认导入 meipo 模块
	import { ref } from 'vue'
	import meipo from '../eventBus.js'

	const msg = ref('两情若是长久时, 又岂在朝朝暮暮')

	const word = ref('')

	const onSend = () => {
		// 发送消息
		meipo.emit('biubiubiu', msg.value)
	}

	meipo.on('ZhaNan', (str) => {
		word.value = str
	})
</script>
<template>
	<div class="my-left">
		<h3>牛郎</h3>
		<button @click="onSend">Send Message</button>
		<p>收到来自织女的回话 = {{ word }}</p>
	</div>
</template>

<style scoped>
	.my-left {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 100px;
		background: plum;
	}
</style>
